<template>
  <div class="con" style="margin-bottom:100px">
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      style="height:50px;margin-top:6px"
    >
      <template #right>
        编辑
      </template>
    </van-nav-bar>

    <div class="goods-list">
      <div class="goods" v-for="(data, i) in list" :key="data._id + i">
        <!-- 此时的checked是自己添加的 -->
        <van-checkbox v-model="data.checked" />

        <!-- 图片 -->
        <img
          class="goods-img"
          :src="data.product.coverImg"
          alt=""
          width="80"
          height="80"
        />

        <!-- 商品信息 -->
        <div class="goods-info">
          <!-- 商品名称 -->
          <p>{{ data.product.name }}</p>

          <!-- 价格 -->
          <span style="color:red;font-weight:800"
            >￥{{ data.product.price }}</span
          >

          <!-- 加号 -->
          <button class="plus" @click="updatePro(data.product._id, 1)">
            +
          </button>
          {{ data.quantity }}

          <!-- 减号 -->
          <button
            class=""
            @click="data.quantity > 1 && updatePro(data.product._id, -1)"
          >
            -
          </button>

          <!-- 删除 -->
          <button v-if="data.checked" @click="del(data._id)">删除</button>
        </div>
      </div>
    </div>
    <van-submit-bar
      :price="sumPrice * 100"
      button-text="立即结算"
      @submit="onSubmit"
      style="margin-bottom:50px;"
    >
      <van-checkbox v-model="checked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { Toast } from "vant";
import { loadCartlist, addToCart, delpro } from "../../api/cart";
import { addorder } from "../../api/order";
export default {
  components: {},
  data() {
    return {
      list: [],
    };
  },
  computed: {
    checked: {
      // 如果购物车全选按钮是true，那么就全选，如果是false那么上面的补选中
      set(flag) {
        // return this.list.forEach((item) => (item.checked = flag));
        console.log(flag);
        // 动态添加属性
        return this.list.map((item) => this.$set(item, "checked", flag));
      },
      get() {
        // 如果购物车的总长度等于选中的总长度那么返回true
        return (
          this.list.length ==
          this.list.filter((item) => item.checked == true).length
        );
      },
    },
    // 获取选中的购物车列表
    selectgoods() {
      var selectlist = [];
      this.list.forEach((item) => {
        if (item.checked) {
          selectlist.push({
            quantity: item.quantity,
            product: item._id,
            price: item.product.price,
          });
        }
      });
      return selectlist;
    },
    // 计算总价
    sumPrice() {
      // 先选中勾选中的，然后计算他们的总价钱
      return this.list
        .filter((item) => {
          return item.checked;
        })
        .reduce(function(pre, cur) {
          return pre + cur.product.price * cur.quantity; //商品价格*购物车此商品的数量
        }, 0);
    },
  },
  watch: {},

  methods: {
    //回到首页
    gohome() {
      this.$router.push("/");
    },
    //返回上一级
    onClickLeft() {
      this.$router.go(-1);
    },
    // 获取购物车列表
    async getcartlist() {
      const result = await loadCartlist();
      console.log(result);
      this.list = result.data;
    },
    // 点击+ 或者-更新购物车数量
    async updatePro(id, num) {
      // 调用接口，添加购物车
      await addToCart(id, num);
      // 添加完购物车，我可以重新调用一次接口，这里我是添加购物车之后，把list数据进行更新
      this.list.forEach((data) => {
        if (data.product._id == id) {
          data.quantity = data.quantity + num;
        }
      });
    },
    // 删除单个购物车
    async del(id) {
      console.log(123);
      const result = await delpro(id);
      console.log(result);
      // 删除成功，重新调用一下获取列表接口
      await this.getcartlist();
    },
    // 删除购物车
    dels() {},
    // 提交订单
    async onSubmit() {
      // 判断有没有收货人，如果没有收货人就跳转到新增收货人页面
      const result = await addorder({
        receiver: "xxx",
        regions: "高新区威科姆",
        address: "随便",
        orderDetails: this.selectgoods,
      });
      console.log(result);
      if (result.data.code == "success") {
        Toast.success(result.data.message);
        this.$router.push("/order");
      }
    },
  },
  created() {
    // 初始化调用
    this.getcartlist();
  },
  mounted() {},
};
</script>
<style scoped>
.con {
  overflow-x: hidden;
}
.goods {
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 5px 15px;
}
.goods-img {
  flex: 1;
  height: 80px;
  border: 1px solid #ccc;
  margin: 0 5px;
}
.goods-img img {
  width: 100%;
}
button {
  margin: 0 10px;
}
.goods-info {
  flex: 3;
}
</style>
